<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery.js"></script>
<script src="canny.js"></script>
<body>
<button id="">勾靶</button>
<div style="background-color: black;">
    <canvas id="doodle" width="600" height="600"></canvas>
</div>
</body>
<script>




        lmViewer = {
                data:{
                    start:[],
                    end:[],
                    color:'red',
                    lineWidth:2,
                    radius:20,
                    mousePressed:false
                },
                fn:{

                },
                ctrl:{
                    init:function(){
                      var  doodle  = document.getElementById('doodle');
                        for(var i=0;i<3;i++){
                            lmViewer.data.start[i] = {};
                            lmViewer. data.end[i] = {};
                        }
                        InitThis();
                        var lastX, lastY;
                        var ctx = doodle.getContext('2d');
                        function InitThis() {
                            $('#doodle').mousedown(function (e) {
                                lmViewer.data.start[0].x = e.clientX - $(this).offset().left;
                                lmViewer.data.start[0].y = e.clientY - $(this).offset().top;
                                lmViewer.data.mousePressed  = true;
                                drawCirle();
                            });

                            $('#doodle').mousemove(function (e) {
                                if(!lmViewer.data.mousePressed){
                                    return;
                                }
                                lmViewer.data.end[0].x = e.clientX - $(this).offset().left;
                                lmViewer.data.end[0].y = e.clientY - $(this).offset().top;
                                Draw(angle);
                            });

                            $('#doodle').mouseup(function (e) {
                                lmViewer.data.mousePressed  = false;
                            });

                            $('#doodle').mouseleave(function (e) {

                            });
                            $('#doodle').mouseover(function(e){
                                $(this).addClass('contourCursor');
                            });
                        };

                        function Draw(angle) {
                            ctx.clearRect(lmViewer.data.start[1].x+1,lmViewer.data.start[1].y-1,lmViewer.data.radius-1,lmViewer.data.radius-1);
                            ctx.save();
                            lmViewer. data.start[0].x = lmViewer.data.end[0].x;
                            lmViewer.data.start[0].y = lmViewer.data.end[0].y;
                        };
                        function clearArea() {
                            ctx.setTransform(1, 0, 0, 1, 0, 0);
                            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                        };

                        function drawCirle(){
                            ctx.beginPath();
                            ctx.strokeStyle = lmViewer.data.color;
                            ctx.lineWidth = lmViewer.data.lineWidth;
                            ctx.arc(lmViewer.data.start[0].x,lmViewer.data.start[0].y,lmViewer.data.radius,0,2*Math.PI);
                            ctx.stroke();
                        }
                    },
                    doodle:function(){
                        Doodle.ctrl.init();
                    },

                }
            }
    
        lmViewer.ctrl.init();

</script>
</html>